<template>
    <view class="s-v-box">
        <view class="t-txt">仓库概览</view>
        <view class="s-t-box">
            <view class="s-t-item">
                <text>{{ sNameLb }}:</text>
                <text @click="onClickStore">{{ storeInfo.store_name }}</text>
                <!-- <text class="icon-font arrow-xiala-font" >&#xe600;</text> -->
            </view>
            <view>
                <text>{{ stNumLb }}:</text>
                <text class="txt">{{ storeInfo.qty }}</text>
            </view>
            <view>
                <text>{{ stMoneyLb }}:</text>
                <text class="txt">{{ storeInfo.amount }}</text>
            </view>
        </view>
        <view class="s-c-list-box">
            <view class="scl-tit-box">
                <view
                    class="scl-tit"
                    v-for="(item, index) in catTabArr"
                    :key="index"
                >
                    <view class="txt">{{ item }}</view>
                </view>
            </view>

            <view class="sc-list-box comm-list-scroll">
                <view class="sclb-i" v-for="(item, index) in list" :key="index">
                    <view
                        class="i-1-box"
                        v-if="item && item.cat_name"
                        @click="onClickStoreCat(item)"
                    >
                        <view class="i-1 name-box">{{ item.cat_name }}</view>
                        <view class="i-1">{{ item.percent }}%</view>
                        <view class="i-1">{{ item.amount }}</view>
                        <text class="icon-font arrow">&#xe600;</text>
                    </view>

                    <view
                        class="sclb-i-sub-box"
                        v-if="item.sub"
                        v-for="(item1, idx) in item.sub"
                        :key="idx"
                    >
                        <view
                            class="i-2-box"
                            v-if="item1 && item1.cat_name"
                            @click="onClickStoreCat(item1)"
                        >
                            <view class="i-2 name-box">{{
                                item1.cat_name
                            }}</view>
                            <view class="i-2">{{ item1.percent }}%</view>
                            <view class="i-2">{{ item1.amount }}</view>
                            <text class="icon-font arrow">&#xe600;</text>
                        </view>
                        <view
                            class="sclb-i-sub3-box"
                            v-if="item1.sub"
                            v-for="(item2, idx3) in item1.sub"
                            :key="idx3"
                        >
                            <view
                                class="i-3-box"
                                v-if="item2 && item2.cat_name"
                                @click="onClickStoreCat(item2)"
                            >
                                <view class="i-3 name-box">{{
                                    item2.cat_name
                                }}</view>
                                <view class="i-3">{{ item2.percent }}%</view>
                                <view class="i-3">{{ item2.amount }}</view>
                                <text class="icon-font arrow">&#xe600;</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import lang from "@/js/conf/Lang.js";
export default {
    props: ["storeInfo", "list"],
    data() {
        return {
            sNameLb: lang.storeName,
            stNumLb: lang.storeTotalNum,
            stMoneyLb: lang.stroeTotalMoney,
            catTabArr: [lang.chTjTxt, lang.zbTxt, lang.jeTxt],
        };
    },
    methods: {
        onClickStore() {
            return;
            if (!this.storeInfo) return;
            if (!this.storeInfo.storeid) return;
            let data = {};
            data.storeid = this.storeInfo.storeid;
            this.$emit("goStoreDetail", data);
        },

        onClickStoreCat(item) {
            console.log(item, this.storeInfo);
            if (!item) return;
            if (!this.storeInfo) return;
            if (!this.storeInfo.storeid) return;
            let data = {};
            data.catid = item.catid;
            data.storeid = this.storeInfo.storeid;
            this.$emit("goStoreCat", data);
        },
    },
};
</script>

<style lang="scss">
.s-v-box {
    width: calc(100% - 344px);
    height: calc(100vh - 53px);
    .t-txt {
        padding: 10px;
        font-size: 14px;
        font-weight: bold;
    }
    .s-t-box {
        display: flex;
        height: 60px;
        justify-content: space-around;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
        line-height: 61px;
        text {
            padding: 5px;
        }
        .s-t-item {
            // cursor: pointer;
        }

        .txt {
            font-weight: bold;
            color: #3388ff;
        }
    }

    .s-c-list-box {
        .scl-tit-box {
            display: flex;
            justify-content: space-around;
            padding: 6px 0;
            background-color: #eee;
            border-bottom: 1px solid #eee;
            .scl-tit {
                display: flex;
                flex: 1;
                padding: 2px 0;
                background-color: #eee;
                .txt {
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }
    .sc-list-box {
        height: calc(100vh - 199px);
        .sclb-i {
            border-bottom: 1px solid #eee;
            .i-1-box {
                padding: 6px 0;
                display: flex;
                justify-content: space-between;
                position: relative;
                cursor: pointer;
                .i-1 {
                    width: 260px;
                    text-align: center;
                    &.name-box {
                        width: 250px;
                        padding-left: 10px;
                        text-align: left;
                    }
                }
                .arrow {
                    position: absolute;
                    right: 10px;
                }
            }
            .i-1-box:hover {
                background-color: #fafafa;
            }
            .sclb-i-sub-box {
                padding: 6px 0;
                .i-2-box {
                    padding: 6px 0 6px 0px;
                    display: flex;
                    justify-content: space-between;
                    position: relative;
                    cursor: pointer;
                    .i-2 {
                        width: 260px;
                        text-align: center;
                        &.name-box {
                            width: 230px;
                            padding-left: 30px;
                            text-align: left;
                        }
                    }
                    .arrow {
                        position: absolute;
                        right: 10px;
                    }
                }
                .i-2-box:hover {
                    background-color: #fafafa;
                }

                .sclb-i-sub3-box {
                    .i-3-box {
                        padding: 6px 0 6px 0px;
                        display: flex;
                        justify-content: space-between;
                        position: relative;
                        cursor: pointer;
                        .i-3 {
                            width: 260px;
                            text-align: center;
                            &.name-box {
                                width: 210px;
                                padding-left: 50px;
                                text-align: left;
                            }
                        }
                        .arrow {
                            position: absolute;
                            right: 10px;
                        }
                    }
                    .i-3-box:hover {
                        background-color: #fafafa;
                    }
                }
            }
        }
    }
}
</style>